<template>
  <!-- // 地图 -->
  <div class="homePageCards">
    <div id="homePageCards" class="position">
      <div id="warrmap" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<script>
import sjccKey from "@/config/sjmapkey";
import { listPageEmergencyEvent } from "@/api/EmergencyDisposal/yjsj";
import { listPage } from "@/api/EmergencyDisposal/xyyp";
export default {
  name: "MapContent",
  components: {
  },
  props: {
    mapType: {
      type: String,
      default: "yjsj"
    }
  },
  data() {
    return {
      map: null,
      geo: null,
      geocodingTask: null,
      warehouseList: [],
      zoom: 5.9,
      show: true
    };
  },
  mounted() {
    this.initLocalMap();
  },
  methods: {
    initLocalMap() {
      SGMap.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then((res) => {
        this.map = new SGMap.Map({
          // 地图绑定的DOM元素ID
          container: "warrmap",
          // 地图样式
          style: "aegis://styles/aegis/Streets",
          // 默认缩放层级
          zoom: 8,
          // 地图中心点
          center: [114.36730140947924, 30.574022147218216],
          // 地图默认字体
          localIdeographFontFamily: "Microsoft YoHei"
        });
        this.map.on("load", (e) => {
          if (this.mapType === "yjsj") {
            this.getYjxxList();
          } else if (this.mapType === "xyyp") {
            this.getXyypList();
          }
        });
      });
    },
    getYjtzdCity(effectRange) {
      const arr = effectRange.split("、").filter(el => el.includes("县") || el.includes("市") || el.includes("区"));
      const newEffList = [];
      arr.forEach(el => {
        if (el.startsWith("湖北省") && (!el.endsWith("省"))) {
          newEffList.push(el.split("省")[1]);
        } else {
          newEffList.push(el);
        }
      });
      const list = [];
      newEffList.forEach(el => {
        if (el.endsWith("县") || el.endsWith("区")) {
          if (el.includes("市")) {
            list.push(el.split("市")[1]);
          } else {
            list.push(el);
          }
        } else if (el.endsWith("市")) {
          if (el.includes("自治州")) {
            list.push(el.split("自治州")[1]);
          } else {
            const index1 = el.indexOf("市");
            const index2 = el.lastIndexOf("市");
            if (index1 === index2) {
              list.push(el);
            } else {
              list.push(el.slice(index1 + 1));
            }
          }
        }
      });
      const newList = [...new Set(list)];
      return newList[0];
    },
    getXyypList() {
      const params = {
        pageNum: 1,
        pageSize: 30
      };
      listPage(params).then(res => {
        const arr = [];
        const citys = [];
        res.data.forEach(el => {
          if (el.effectRange && el.effectRange !== "湖北省") {
            const city = this.getYjtzdCity(el.effectRange);
            if (!citys.includes(city)) {
              citys.push(city);
              arr.push({
                dangerName: el.eventName,
                warningNoticeName: el.judgeName,
                warningLvName: el.eventLvName,
                warningLvCode: el.eventLvCode,
                effectRange: city
              });
            }
          }
        });
        this.popupYjDOM = new SGMap.Popup({
          closeButton: false,
          closeOnClick: false,
          offset: {
            bottom: [0, 0]
          }
        });
        SGMap.plugin(["SGMap.DistrictTask"]).then(() => {
          const districtTask = new SGMap.DistrictTask();
          arr.forEach((el, index) => {
            el.effectRange && this.drawYjImg(el, index, districtTask);
          });
        });
      });
    },
    getYjxxList() {
      const params = {
        pageNum: 1,
        pageSize: 30
      };
      listPageEmergencyEvent(params).then(res => {
        const arr = [];
        const citys = [];
        res.data.forEach(el => {
          if (el.effectRange && el.effectRange !== "湖北省") {
            const city = this.getYjtzdCity(el.effectRange);
            if (!citys.includes(city)) {
              citys.push(city);
              arr.push({
                dangerName: el.eventName,
                warningNoticeName: el.emergencyEvent,
                warningLvName: el.eventLvName,
                warningLvCode: el.eventLvCode,
                effectRange: city
              });
            }
          }
        });
        this.popupYjDOM = new SGMap.Popup({
          closeButton: false,
          closeOnClick: false,
          offset: {
            bottom: [0, 0]
          }
        });
        SGMap.plugin(["SGMap.DistrictTask"]).then(() => {
          const districtTask = new SGMap.DistrictTask();
          arr.forEach((el, index) => {
            el.effectRange && this.drawYjImg(el, index, districtTask);
          });
        });
      });
    },
    drawYjImg(el, index, districtTask) {
      districtTask.searchDistrict({
        keyword: el.effectRange,
        extension: true,
        subdistrict: "1"
      }).then((result) => {
        const center = result.data.districts[0].center;
        const centerArr = center.split(",");
        const longitude = Number(centerArr[0]);
        const latitude = Number(centerArr[1]);
        const imgObj = {
          "1": "hhsd",
          "2": "csd",
          "3": "hsd",
          "4": "lsd"
        };
        var url = require(`@/assets/map/${imgObj[el.warningLvCode]}.png`);
        this.map.loadImage(url, (error, image) => {
          this.map.addImage("yjImg" + index, image);
          this.map.addLayer({
            id: "yjImgLayer" + index,
            type: "symbol",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "Point",
                      coordinates: [longitude, latitude]
                    },
                    properties: {
                      name: ""
                    }
                  }
                ]
              }
            },
            layout: {
              "icon-image": "yjImg" + index,
              "icon-size": 0.6,
              "icon-ignore-placement": true,
              "text-ignore-placement": false,
              "text-size": 12,
              "text-anchor": "top",
              "text-allow-overlap": false,
              "icon-anchor": "center",
              "text-offset": [0, 0],
              "text-max-width": 8,
              "text-font": ["Microsoft YaHei Regular"]
            },
            paint: {
              "text-color": "#555252",
              "text-halo-color": "#FFFFFF",
              "text-halo-width": 1.33333
            }
          });
        });
        var bkurl = require("@/assets/map/tancfc.png");
        this.map.on("mouseenter", "yjImgLayer" + index, (e) => {
          this.popupYjDOM.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML(
            `<div style="width:360px;height:180px;display:flex;flex-direction:column;background: url(${bkurl});background-size: 100% 100%;padding:20px;">
            <div style="font-size:20px;color:#fff;padding:6px;height: 24px;line-height: 24px;margin-bottom: 20px;">${el.warningNoticeName}</div>
            <div style="font-size:20px;color:#fff;padding:6px;height: 24px;line-height: 24px;margin-bottom: 6px;">事件类型：${el.dangerName}</div>
            <div style="font-size:20px;color:#fff;padding:6px;height: 24px;line-height: 24px;margin-bottom: 6px;">响应级别：${el.warningLvName}</div>
            <div style="font-size:20px;color:#fff;padding:6px;height: 24px;line-height: 24px;margin-bottom: 6px;">影响范围：${el.effectRange}</div>
            
          </div>`
          ).addTo(this.map);
        });
        this.map.on("mouseleave", "yjImgLayer" + index, (e) => {
          this.popupYjDOM.remove();
        });
      });


    }
  }
};

</script>

<style scoped lang="less">
.homePageCards {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 5px;

  #map {
    border-radius: 5px;
  }
}

.position {
  position: relative;
  width: 100%;
  height: 100%;
}

.full-box {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}

.full {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.654901960784314);

  .full-boxs {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    z-index: 9;
    background-color: rgba(255, 255, 255, 0.654901960784314);
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 5px;

    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  }
}

/deep/.sgmap-popup-content {
  background: transparent,
}
</style>
